<style scoped>
    #box{
        height: 100%;
        background-color: #ecf1f2;
    }
</style>
<style>

</style>
<template>
    <div id="box">
        <top-part></top-part>
        <middle-part></middle-part>
    </div>
</template>
<script>
    import topPart from '../components/topPart.vue'
    import middlePart from '../components/middlePart.vue'
    import bottomPart from '../components/bottomPart.vue'
    export default {
        data () {
            return {

            }
        },
        mounted(){
            this.middleH();
            this.middleW();
            var that=this;
            window.onresize=function () {
                that.middleH()
                that.middleW()
            };


        },
        components: {
            topPart ,
            middlePart,
            bottomPart
        },
        computed: {

        },
        methods: {
            middleH(){
                $('#middlePart').css({height:window.innerHeight-$('#topPart').height()+"px"});
                $('.layout-content').css({height:$('#middlePart').height()+"px"});
            },
            middleW(){
                $('#rightPart').css({width:$('#middlePart').width()-$('.layout-menu-left').width()+'px'})
            }

        }
    }
</script>